import {createElement, type CSSProperties} from 'react';
import {LaptopOutlined, NotificationOutlined, UserOutlined} from '@ant-design/icons';
import type {MenuProps} from 'antd';
import {Breadcrumb, Layout, Menu} from 'antd';
// import AdminComponent from "./AdminComponent";
import TestIndexDbComponent from "@/component/TestIndexDBComponent.tsx";

const {Header, Content, Sider} = Layout;

const items2: MenuProps['items'] = [
    {
        key: "1001",
        label: "1Background Manager",
        icon: createElement(LaptopOutlined)
    },
    {
        key: "1002",
        label: "2Record Manager",
        icon: createElement(LaptopOutlined)
    },
    {
        key: "1003",
        label: "3Logger Manager",
        icon: createElement(LaptopOutlined)
    },
    {
        key: "1004",
        label: "User Admin",
        icon: createElement(UserOutlined)
    },
    {
        key: "1005",
        label: "Role Admin",
        icon: createElement(NotificationOutlined)
    },
    {
        key: "1006",
        label: "Role Admin2",
        icon: createElement(NotificationOutlined)
    },
    {
        key: "1007",
        label: "Role Admin3",
        icon: createElement(NotificationOutlined)
    },
    {
        key: "1008",
        label: "Role Admin2",
        icon: createElement(NotificationOutlined)
    },
    {
        key: "1009",
        label: "Role Admin2",
        icon: createElement(NotificationOutlined)
    },
    {
        key: "1019",
        label: "Role Admin2",
        icon: createElement(NotificationOutlined)
    }
]

/**
 * 导航头的样式
 */
const headerStyle: CSSProperties = {
    display: "flex",
    position: "sticky",
    top: 0,
    zIndex: 90,
    width: "100%",
    alignItems: "center",
    height: "50px",
    // background: "transparent",
    backgroundColor: "rgba(13,29,57,0.47)",
    backdropFilter: "blur(6px)",
    borderBottom: "1px solid #555",
}

const siderStyle: CSSProperties = {
    overflow: 'auto',
    height: 'calc(100vh - 50px)',
    position: 'fixed',
    insetInlineStart: 0,
    zIndex: 10,
    top: 50,
    bottom: 0,
};

const NavigateComponent = () => {
    return (
        <Layout>
            <Header style={headerStyle}>
                <div className="demo-logo"/>
                <div>我是导航的Header, 我使用了透明的背景</div>
            </Header>
            <Layout hasSider style={{
                backgroundColor: "rgba(44,54,62,0.57)",
                // backdropFilter: "blur(2px)",
                overflow: "auto",
                height: 'calc(100vh - 50px)',
            }}>
                <Sider width={200} style={siderStyle} collapsed={false}>
                    <Menu
                        theme={"dark"}
                        mode="inline"
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['sub1']}
                        style={{height: '100%', borderInlineEnd: 0}}
                        items={items2}
                    />
                </Sider>
                <Layout
                    style={{
                        padding: '0 10px 0 10px',
                        marginLeft: "200px",
                        overflowX: "hidden",
                        backdropFilter: "blur(2px)",
                    }}>
                    <Breadcrumb
                        items={[{title: 'Home'}, {title: 'List'}, {title: 'App'}]}
                        style={{margin: '16px 0'}}
                    />
                    <Content>
                        {/*<AdminComponent/>*/}
                        <TestIndexDbComponent/>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    );
};

export default NavigateComponent;